<template>
    <header class="wyg-home">
        <div class="header-box">
            <div class="city">
                <router-link to="/city"><span>{{ city }}</span></router-link>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索" @focus="jumpSearchFn">
            </div>
            <div class="user">
                <div v-if="isLogin">
                    <router-link to="/my">
                        <!-- {{ nick_name }} -->
                        <div style="width: 1.0667rem; height: 1.0667rem; overflow: hidden; border-radius: 50%;">
                            <img v-if="user_picUrl" style="width: 1.2rem; vertical-align: middle;" 
                        :src="user_picUrl" alt="">
                        </div>
                    </router-link>
                </div>
                <div v-else>
                    <router-link to="/login_list">登录</router-link>
                </div>
            </div>
        </div>
    </header>

    <section class="wyg-banner">
        <van-swipe :autoplay="5000" lazy-render @change="onChange" indicator-color="#ff0000">
            <van-swipe-item v-for="item in banners.list" :key="item.id">
                <!-- 链接 -->
                <a :href="item.banner_href" target="_blank">
                    <div class="img-box">
                        <img style="width: 100%; vertical-align: middle;" :src="item.banner_picUrl" />
                    </div>
                </a>
            </van-swipe-item>
        </van-swipe>
    </section>

    <div class="wyg-current" v-if="current.list.length != 0">
        <h3>旅游攻略</h3>
        <ul>
            <li v-for="item in current.list" :key="item.id">
                <router-link :to="{
                    path: '/detail',
                    query: { article_id: item.article_id, article_type: item.article_type }
                }">
                    <div class="left">{{ item.article_title }}</div>
                    <div class="right">
                        <i>{{ item.article_author }}</i>
                        <span>{{ formatime(item.article_create_time) }}</span>

                    </div>
                </router-link>
            </li>
        </ul>
    </div>

    <nav class="wyg-nav">
        <van-tabs v-model:active="active" @click-tab="onClickTab" offset="300">
            <van-tab v-for="item in navs.list" :title="item.nav_name" v-bind:key="item.id">
                <!-- 导航文章 -->
                <div v-if="article.list.length != 0">
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <van-cell v-for="item in article.list" :key="item.id">
                            <router-link :to="{
                                path: '/detail',
                                query: { article_id: item.article_id, article_type: item.article_type }
                            }">
                                {{ item.article_title }}
                            </router-link>
                        </van-cell>
                    </van-list>

                    <!-- {{ article.list }} -->
                </div>
                <div v-else>
                    <!-- <p>当前导航没有文章~~</p> -->
                    <van-empty description="当前导航没有文章~~" />
                </div>
            </van-tab>
        </van-tabs>
    </nav>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showConfirmDialog,showToast } from 'vant'
import moment from 'moment'
import { getBannerList, getNavList, getArticleList, getNavArticleList, getAddressArticleList, isOnLine,getUserPicUrl } from '../api/index'
const $router = useRouter()
const $route = useRoute()
let city: any = ref('广州')
city.value = $route.query?.city || '广州'
let banners: any = reactive({ list: [] })
let navs: any = reactive({ list: [] })
let current: any = reactive({ list: [] })
let article: any = reactive({ list: [] })
let active = ref(0)
let loading = ref(false)
let finished = ref(false)
let isLogin = ref(false)
let nick_name = ref('用户')
let num = ref(1);
let nav_name = ref('全部')
let user_picUrl = ref('')

// 跳转搜索页
const jumpSearchFn = ()=> {
    $router.push({
        path: '/search'
    })
}

const onChange = (index: number) => {
    // showToast('当前 Swipe 索引：' + index);
}

// 当前点击的导航的请求
const onClickTab = async (rows: any) => {
    let { title, name } = rows;

    // 判断
    if (name == 0) {
        nav_name.value = '全部';
        return;
    }

    nav_name.value = title;
    // console.log(rows)
    await getNavArticleList({ nav_name: title })
        .then(
            content => {
                // console.log('4.0',content);
                if (content.code == 200) {
                    article.list = content.result;
                    // console.log('--->', content.result)
                }
            },
            err => {
                console.log(err);// 接口写错，服务异常
            }
        )
};

// 格式化时间
const formatime = (date: Date) => {
    return moment(date).format('YY-MM-DD hh:mm:ss')
}

// 编写初始化方法
const initFn = async () => {
    // 获取轮播图列表数据
    await getBannerList()
        .then(
            //数据
            content => {
                // console.log("1.0", content)
                if (content.code == 200) {
                    banners.list = content.result;
                }
            }
        )

    // 获取导航列表
    await getNavList()
        .then(
            //数据
            content => {
                // console.log("2.0", content)
                if (content.code == 200) {
                    content.result.unshift({ nav_name: '全部', id: 0 });
                    navs.list = content.result;
                }
            }
        )

    // 获取当前地址的文章数据
    await getAddressArticleList({ article_address: city.value })
        .then(
            content => {
                // console.log('5.0', content)
                if (content.code == 200) {
                    current.list = content.result;
                }
            }
        )

    // 判断用户登录状态
    await isOnLine()
        .then(
            content => {
                // 告诉用户当前登录状态
                // console.log(content);
                if(content.code == 200) {
                    isLogin.value = true;
                    nick_name.value = content.user_nick_name && content.user_nick_name.slice(0,4)
                }
                if (content.code != 200) {
                    // 出现对话框
                    showConfirmDialog({message: content.msg})
                        .then(() => {
                            // on confirm
                            // console.log("跳转登录")
                            $router.push({
                                path: '/login_list'
                            })
                        })
                        .catch(() => {
                            // on cancel
                            // console.log("取消")
                        });
                }
            }
        )
    // 获取用户头像
    await getUserPicUrl().then(
        content=>{
            // console.log('9.0',content)
            if(content.code == 200){
                // 设置头像
                user_picUrl.value = content.user_url;
            }
        }
    )
}

initFn();

// ===========列表组件================
const onLoad = async () => {
    // 异步更新数据
    // 请求数据
    if (nav_name.value == '全部') {
        loading.value = false;
        await getArticleList({ page: num.value })
            .then(
                content => {
                    // console.log('3.0',content);
                    if (content.code == 200) {
                        article.list = content.result;
                        let { page_num, page_size, total } = content;
                        num.value = page_num;// 自增
                        // console.log({ page_num, page_size, total })
                        if ((page_num * page_size + 1) >= total) {
                            // console.log('加载全部。')
                            finished.value = true;
                        }
                        loading.value = false;
                    }
                },
                err => {
                    console.log(err);// 接口写错，服务异常
                    loading.value = false;
                }
            )

            loading.value = false;
    }
   
};
onLoad();

</script>

<style lang="less">
@import '../static/less/common.less';
:root {
    --van-padding-sm: .2667rem 0;
    --van-empty-description-color: #ccc;
    --van-cell-value-color: #333;
    --van-swipe-indicator-inactive-background: #fff;
    --van-swipe-indicator-inactive-opacity: 1;
    --van-swipe-indicator-size: 12px;
    // --van-tabs-bottom-bar-color: #f00;
    --van-tabs-bottom-bar-color: @bgColor;
    // 定义变量
    --aaa: red;
}
.xxxx {
    // 使用变量
    background: var(--aaa);
}
.img-box {
    height: 4rem;
    overflow: hidden;
    width: 100%;
}
.wyg-banner .van-swipe__indicator {
    background-color: #fff;
    border-radius: .2667rem;
    width: .5333rem;
    height: .1333rem;
    bottom: .2667rem !important;
}
.wyg-nav {
    padding: .2667rem 0;
    background-color: #fff;
    .van-cell__value {
        text-align: left;
    }
    a {
        color: #000;
    }
}
.wyg-current {
    padding: 0 .4rem;

    h3 {
        display: none;
        // padding: 0 .1333rem;
        font-weight: normal;
        font-size: 16px;
        line-height: .8533rem;
        border-bottom: 3px solid #ccc;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            right: -0.5333rem;
            bottom: -.2933rem;
            width: 0px;
            height: 0px;
            // background-color: #000;
            border: 10px solid transparent;
            // border-left-color: #ccc;
        }
    }

    ul {
        li {
            a {
                width: 100%;
                display: block;
                // display: flex;
                // justify-content: space-between;
                // align-items: center;
                padding: .2667rem 0;
                border-bottom: 1px dashed #ccc;
                color: #000;
                line-height: 175%;

                .left {
                    font-size: 16px;
                }

                .right {
                    margin-top: .1333rem;
                    font-size: 15px;

                    span {
                        color: #666;
                    }

                    i {
                        color: #333;
                        font-style: normal;
                        margin-right: .2667rem;
                    }
                }
            }
        }
    }
}
.wyg-home {
    width: 100%;
    box-sizing: border-box;

    .header-box {
        width: 100%;
        height: 1.3333rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .user {
            text-align: center;
            font-size: 15px;
            color: #666;
            padding: 0 .2133rem;
        }
        .city{
            width: 1.3333rem;
            text-align: center;
            font-size: 15px;
            color: #666;

            a {
                color: #666;
            }
        }

        .search {
            flex-grow: 1;

            input {
                display: block;
                width: 100%;
                box-sizing: border-box;
                height: .8rem;
                border-radius: .4rem;
                padding-left: .5333rem;
                outline: none;
                border: 1px solid #ccc;
                font-size: 15px;
            }
        }
    }
}
</style>